<template>
    <div>
        <div class="main_operation">
            <!-- <div class="operation_left">
                <h3 class="title" style="min-width: 100px">历史曲线</h3>
            </div> -->
            <div class="operation_right">
                <a-input placeholder="请输入用户名" style="width: 200px;margin-right:5px" v-model="formList.user_name" />
                <!-- <a-select allowClear class="mr10" style="width: 200px" v-model="formList.login_status" placeholder="用户姓名">
                    <a-select-option v-for="item in formList.login_status" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
                </a-select> -->
                <!-- <a-select v-model="formList.user_id" allowClear class="mr10" style="width: 150px" placeholder="请选择用户">
                  <a-select-option v-for="item in passportAllData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
                </a-select> -->
                  <a-range-picker v-model="rangePickerVal" :placeholder="['登录开始时间', '登录结束时间']" class="mr5" @change="onDateChange" />
                <a-button class="mr10" type="primary" @click="onSearch">搜索</a-button>
                <a-button type="danger" @click="onSearch('reset')">重置</a-button>
                <!-- <a-button type="primary">下载数据</a-button> -->
            </div>
        </div>
        <div class="main">
            <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id">
                <!-- :scroll="{x: 890, y: 500 }" -->
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>

    </div>
</template>

<script>
import {
    mapState,
    mapActions
} from 'vuex';
export default {
    name: "LoginStatistics",
    data() {
        return {
                rangePickerVal: undefined,
            //列表
            tableLoad: false, //列表loading状态
            formList: { //列表信息
                user_name: "",
                login_status: undefined,
                user_id: undefined,
                page: 1
            },
        }
    },
    computed: {
        ...mapState({
            Fields: state => state.loginStatistics.Fields,
            dataLists: state => state.loginStatistics.dataLists,
            passportAllData: state => state.Passport.passportAllData, // 所有用户信息            
        }),
    },
    mounted() {
        this.changeData()
        //   this.passportAll();
    },
    methods: {
          onDateChange(date, dateStrings) {
      console.log(date, dateStrings);
      this.formList.login_time_start = dateStrings[0];
      this.formList.login_time_end = dateStrings[1];
      if (!date.length) {
        delete this.formList.login_time_start;
        delete this.formList.login_time_end;
      }
    },
        ...mapActions({
            getLists: 'loginStatistics/getLoginStatistics', //列表
            // passportAll: "Passport/passportAll", //所有用户信息
        }),
        /* 通用模块 */
        // 勾选
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys
        },
        onSearch(type) {
            if (type == 'reset') {
                this.formList = {
                    login_time_start: undefined,
                    login_time_end: undefined,
                    page: 1,
                    user_name:""
                }
            } else {
                this.formList.page = 1
            }
            this.changeData();
        },
        // 重新获取列表数据
        changeData() {
            this.tableLoad = true
            setTimeout(() => {
                this.getLists(this.formList)
                this.tableLoad = false
            }, 1000);
        },
        // 页码
        pageChange(page) {
            this.formList.page = page;
            this.getLists(this.formList)
        },
        /* 通用模块end */
    }
}
</script>

<style scoped>
</style>
